<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>TAB选项卡</title>
    <style type="text/css">

       #tab{
       	width: 300px;
       	margin: 50px;
       	padding: 0;
       	overflow: hidden;
       	border: 1px solid #333;
       }

       #tab input{
          width: 25%;
          float: left;
          border: none;
          line-height: 30px;
          border-bottom: 1px solid #999;
          outline: none;
          cursor: pointer;

       }

        #tab input.active{
        	background:#fff;
        	font-weight: bold;
        	color: #222;
        	border-bottom:none;
        }

    	ul{
    		clear: both;
    		display: none;
    		padding:10px;
    		margin: 0;
    		width: 100%;
    		height: 300px;
    		font-size: 12px;
    		color: #000;
    	}

    </style>


	<script type="text/javascript">
		 window.onload=function(){
		 	 var tab = document.getElementById('tab');
             var inputs=tab.getElementsByTagName('input');
             var uls=tab.getElementsByTagName('ul');
             //alert(inputs.length);
             for (var i = 0 ; i < inputs.length ; i++) {
             	 inputs[i].index=i;
                 inputs[i].onclick=function(){
                      for (var j = 0 ; j < inputs.length ; j++) {
                      	   inputs[j].className='';
                      	   uls[j].style.display='none';
                      }
                      this.className='active';
                      uls[this.index].style.display='block';
                 }
             }	
           }
	</script>
</head>
<body>
  <div id="tab">
	    <input class='active' type="button" value="新闻">
	    <input type="button" value="图片">
	    <input type="button" value="出国">
	    <input type="button" value="招生">
	    <ul style="display: block"><li>新闻</li></ul>
	    <ul><li>图片</li></ul>
	    <ul><li>出国</li></ul>
	    <ul><li>招生</li></ul>
   </div>
</body>
</html>